<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.rawgit.com/konvajs/konva/1.4.0/konva.min.js"></script>
  <meta charset="utf-8">
  <title>Konva Planets Image Map Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
    #controls {
        position: absolute;

        left: 10px;
        top: 10px;
        z-index: 99999;
    }
    label {
        color: white;
        vertical-align: top;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <div id="controls">
      <input type="checkbox" id="checkbox">
      <label> Show map overlay </label>
  </div>
  <script>
    var width = window.innerWidth;
    var height = window.innerHeight;

    function writeMessage(message) {
        text.setText(message);
        messageLayer.draw();
    }

    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });

    var layer = new Konva.Layer();

    var text = new Konva.Text({
        x: 10,
        y: 10,
        fontFamily: 'Calibri',
        fontSize: 24,
        text: '',
        fill: 'white'
    });

    var planetsLayer = new Konva.Layer();
    var circlesLayer = new Konva.Layer();
    var messageLayer = new Konva.Layer();

    var planets = {
        Mercury: {
            x: 46,
            y: 126,
            radius: 32
        },
        Venus: {
            x: 179,
            y: 126,
            radius: 79
        },
        Earth: {
            x: 366,
            y: 127,
            radius: 85
        },
        Mars: {
            x: 515,
            y: 127,
            radius: 45
        }
    };

    var imageObj = new Image();
    imageObj.onload = function() {
        // draw shape overlays
        for(var pubKey in planets) {( function() {
            var key = pubKey;
            var planet = planets[key];

            var planetOverlay = new Konva.Circle({
                x: planet.x,
                y: planet.y,
                radius: planet.radius
            });

            planetOverlay.on('mouseover', function() {
                writeMessage(key);
            });
            planetOverlay.on('mouseout', function() {
                writeMessage('');
            });

            circlesLayer.add(planetOverlay);
        }());
        }

        var checkbox = document.getElementById('checkbox');
        checkbox.addEventListener('click', function() {
            var shapes = circlesLayer.getChildren();

            // flip show property
            for(var n = 0; n < shapes.length; n++) {
                var shape = shapes[n];
                var f = shape.getFill();
                shape.setFill(f == 'red' ? null : 'red');
            }

            circlesLayer.draw();
        }, false);

        messageLayer.add(text);
        stage.add(planetsLayer);
        stage.add(circlesLayer);
        stage.add(messageLayer);

        // draw planets
        var planetsContext = planetsLayer.getContext();
        planetsContext.drawImage(imageObj, 0, 0);
    };
    imageObj.src = '/assets/planets.png';
  </script>

</body>
</html>